<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/commons/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${painting.painter.name }${painting.title}_可观艺术网</title>
<meta name="Keywords" content="${painting.painter.name }${painting.title}拍卖,作品详情,当代画家作品鉴赏,可观艺术" />
<meta name="Description" content="${painting.painter.name }${painting.title}鉴赏,大图,高清图片鉴赏" />
<link href="../style/common.css" rel="stylesheet" type="text/css" />
<link href="../style/painting.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx }/js/head.js"></script>
<script type="text/javascript" src="${ctx }/js/fancybox/jquery-latest.min.js"></script>
<script type="text/javascript" src="${ctx }/js/fancybox/jquery.fancybox.pack.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="${ctx }/js/fancybox/jquery.fancybox.css?v=2.1.4" media="screen" />
<style type="text/css">
#content{text-align: left;width:960px;margin: 0 auto;border:1px solid #cccccc;background: #ffffff;margin-top: 5px;}
#ciyi_top{width: 670px;margin-left: 23px;}
#ciyi_center{width: 960px;}
#ciyi_bottom{height: 55px;}
#ciyi_left{float: left;padding: 0px 10px 0px 25px;}
#ciyi_middle{float: left;width: 630px;height: 630px;border: 1px solid #ccc;}
#ciyi_right{float: left;}

.preImg{position:absolute; left:0px;top:0px;z-index:101;width: 20%;height: 100%;}
.nextImg{position:absolute; right:0px; top:0px;z-index:102;width: 20%;height: 100%;}

.newItem{padding: 5px 0px 5px 25px;font-size: 14px;color: #333333;}
#relativeList_div{width:960px;margin: 0 auto;border:1px solid #cccccc;margin-top: 4px;background: #ffffff}
.ciyi_pic{position:absolute;width: 618px;height: 618px;background: center center;margin-top: 6px;margin-left: 6px;background-repeat: no-repeat;}
.title_ciyi{font-size: 12px;}

.STYLE23 {color: #666666; font-family:幼圆; font-size: 15px;font-weight: bold;margin: 20px 0px 0px 10px;}
.size_control_img_checked{cursor: pointer;border: 1px solid red;}

	.painter_outer{background-color:#cccccc;width: 76px;height: 90px;float:left;cursor: pointer;margin-left:15px;margin-top: 10px;}
	.painter_outer:hover{background-color:#ff9900;}
</style>

</head>
<body>

<div id="_link_div_win" style="display:none;z-index:1001;margin:auto;position: absolute;font-size: 12px;"></div>

<style type="text/css">
.head_item{float: left;height: 63px;width: 65px;line-height: 63px;text-align: center;}
.head_item2{float: left;height: 63px;}
</style>
<div style="width:960px;background: #ffffff;margin: 0 auto;margin-top: 5px;border: 1px solid #ccc;">
	<div class="head_item" style="width: 160px;"><a href="${ctx }/index.jsp"><img src="${ctx }/images/kglogo.jpg" width="110" height="55" border="0" style="margin-top: 4px;"/></a></div>
	<div class="head_item2"><img src="${ctx }/images/fgx.jpg" width="1" height="63" /></div>
	<div class="head_item"><a href="${ctx}/p/paintingAction!pList.do?type=3">瓷器</a></div>
	<div class="head_item2"><img src="${ctx }/images/fgx.jpg" width="1" height="63" /></div>
	<div class="head_item"><a href="${ctx}/p/paintingAction!pList_gallery.do">绘画</a></div>
	<div class="head_item2"><img src="${ctx }/images/fgx.jpg" width="1" height="63" /></div>
	<div class="head_item"><a href="${ctx}/p/paintingAction!pList.do?type=4">艺术家具</a></div>
	<div class="head_item2"><img src="${ctx }/images/fgx.jpg" width="1" height="63" /></div>
	<div class="head_item"><a href="${ctx}/front/all_paintings_painterstar.jsp?type=1">鉴赏</a></div>
	<div class="head_item2"><img src="${ctx }/images/fgx.jpg" width="1" height="63" /></div>
	<div class="head_item"><a href="${ctx}/front/indexAction!viewMarketIndex.do?type=youhua">行情</a></div>
	<div class="head_item2"><img src="${ctx }/images/fgx.jpg" width="1" height="63" /></div>
	<div style="float: left;height: 63px;line-height: 63px;width: 290px;padding-left: 20px;color:#febc5c;font-family: 雅黑;">收获一件作品&nbsp;&nbsp;留存一个世界</div>
	<div class="head_item" style="width: 155px;font-size: 12px;" id="customer_information"><a href="javascript:toLogon('${ctx }')" style="color: #979797">我的订单</a>&nbsp;|&nbsp;<a href="javascript:toRegister('${ctx }')" style="color: #979797">免费注册</a></div>
	<div style="clear: both;"></div>
</div>

<script  type="text/javascript">
	$.ajax( {
		type : "POST",
		url : "${ctx}/servlet/customerLogonCheck?time="+new Date(),
		timeout : 6000,
		async : true, 
		success : function(data, textStatus) {
			$("#customer_information").html(data);
		}
	});
</script>

	<div id="content">
		<div id="ciyi_top">
				<c:if test="${painting.onSaleFlag == '2' && painting.store == 0 }">
					<div style="float: left;padding-top: 15px;">
						<div style="text-align:center;width: 90px;height:29px;padding-top:10px;color: #ffffff;font-size: 15px;font-weight: bold;background-repeat: no-repeat;background: url('../images/ciyi/sale_bg.png');">售罄</div>
					</div>
				</c:if>
			<div style="float:left;font-family: 黑体;font-size: 22px;text-align: center;width: 570px;padding: 20px 0px 20px 0px;" id="page_title">
				${painting.title }
			</div>
			<div style="clear: both;"></div>
		</div>
		<div id="ciyi_center">
			<div id="ciyi_left">
				<div class="size_control_img_checked"><img src="../images/ciyi/jubu.png" border="0"/></div>
				<div style="margin-top: 20px;">
					<a href="${painting.originalImagePath }" id="view_quantu_link"><img src="../images/ciyi/quantu.png" border="0"/></a>
				</div>
			</div>
			<div id="ciyi_middle">
				<div class="preImg" title="浏览上一幅作品" style="cursor:url(../images/arr_left.cur),auto; "></div>
				<div class="nextImg" title="浏览下一幅作品" style="cursor:url(../images/arr_right.cur),auto;"></div> 
				<div style="background-image: url('${painting.middleImageBpath }');" class="ciyi_pic"></div>
			</div>
			<div id="ciyi_right">
				<div id="qqxl_div" style="height: 33px;font-size: 24px;font-family: 黑体;padding-left: 22px;">
					<c:if test="${painting.qqxl != null && painting.qqxl > 0}">
						全球限量<span style="color: red">${painting.qqxl }</span>${painting.unit2 }
					</c:if>
				</div>
				<div id="description">
					<div class="newItem">作品编号：KGCY${painting.id }</div>
					<div class="newItem">材质：${painting.caiZhi }</div>
					<div class="newItem">规格：<c:if test="${painting.width != null}">长<fmt:formatNumber value="${painting.width }" pattern="0"/>cm&nbsp;</c:if><c:if test="${painting.hight != null}">宽<fmt:formatNumber value="${painting.hight }" pattern="0"/>cm&nbsp;</c:if><c:if test="${painting.altitude != null}">高<fmt:formatNumber value="${painting.altitude }" pattern="0"/>cm</c:if></div>
					<c:if test="${painting.painter != null}">
						<div class="newItem">创作者：<a href="${ctx }/${painting.painter.englishName }" style="text-decoration: underline;">${painting.painter.name }</a>
	           				<c:if test="${not empty painting.zhengshu}"><a href="${painting.zhengShuImagePath}" target="_blank" style="text-decoration: underline;">查看证书</a></c:if>
						</div>
					</c:if>
					<div class="newItem">物流：卖方承担</div>
					<div class="newItem">提供方：${painting.provider }</div>
				</div>
					<div class="newItem">起拍价：<span style="color: red"><em class="tb-rmb">¥</em><fmt:formatNumber value="${requestScope.bid.beginPrice }" pattern="0"/>元</span></div>
					<c:if test="${not empty requestScope.bid.currentBidRecord}"><div class="newItem">当前价：<em class="tb-rmb">¥</em><span id="current_price" style="color: red"><fmt:formatNumber value="${requestScope.bid.currentBidRecord.bidPrice }" pattern="0"/></span>元</div></c:if>
					<c:if test="${not empty requestScope.bid.currentBidRecord}"><div class="newItem">受买人：<span id="current_customer">${requestScope.bid.currentBidRecord.customerInfo.displayName }</span></div></c:if>
					<div class="newItem">
						<div style="float: left;background-color:#fffceb">
							加价：
							<img src="../images/ciyi/jian.jpg"  onclick="refresh_price('down')" style="cursor:pointer;"  border="0"/>
						</div>
						<div style="float: left;background-color:#fffceb">
							<input type="text" name="new_price" 
							<c:choose>
								<c:when test="${requestScope.bid.currentBidRecord != null}">
									value="<fmt:formatNumber value='${requestScope.bid.currentBidRecord.bidPrice }' pattern='0'/>"
								</c:when>
								<c:otherwise>
									value="<fmt:formatNumber value='${requestScope.bid.beginPrice }' pattern='0'/>"
								</c:otherwise>
							</c:choose>
						id="new_price" style="width: 100px;border: 0px"  readonly="readonly"/>
						</div>
						<div style="float: left;background-color:#fffceb">
							<img src="../images/ciyi/jia.jpg"  onclick="refresh_price('up')" style="cursor:pointer;"  border="0"/>
						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="newItem">
						<c:choose>
							<c:when test="${requestScope.bid.newFlag == '1'}"><img src="../images/ciyi/pm.jpg" width="131" height="44" style="cursor:pointer;" onclick="onbid()"/></c:when>
							<c:otherwise><img src="../images/ciyi/pm2.jpg" width="131" height="44"/></c:otherwise>
						</c:choose>
					</div>
					<!-- 拍卖剩余时间    begin  -->
						<div class="STYLE23">
							 <div>剩余时间：<span id="left_time0">0天0小时0分0秒</span>
							 		<!-- 当前拍品状态，是否过期  -->
								 <input type="hidden" value="${requestScope.bid.newFlag }" id="new_flag"/>
								 	<!-- 当前拍品ID  -->
								<input type="hidden" name="bid_id" id="bid_id" value="${requestScope.bid.id }"/>
							 </div>
						</div>
					<!-- 拍卖剩余时间    end  -->
				
				<div id="other_pics" style="width: 200px;position: absolute;margin-left: 10px;">
					<c:if test="${not empty  painting.imageInfo}">
						<div class="painter_outer"><div style="margin-top:4px;margin-left:5px;width: 66px;height: 82px;background-position: center center;background-image: url('${painting.smallImagePath }');background-repeat:no-repeat;"><a style="display:block;width:66px;height:82px;"></a></div></div>
					</c:if>
					<c:if test="${not empty  painting.imageInfo2}">
						<div class="painter_outer"><div style="margin-top:4px;margin-left:5px;width: 66px;height: 82px;background-position: center center;background-image: url('${painting.smallImagePath2 }');background-repeat:no-repeat;"><a style="display:block;width:66px;height:82px;"></a></div></div>
					</c:if>
					<c:if test="${not empty  painting.imageInfo3}">
						<div class="painter_outer"><div style="margin-top:4px;margin-left:5px;width: 66px;height: 82px;background-position: center center;background-image: url('${painting.smallImagePath3 }');background-repeat:no-repeat;"><a style="display:block;width:66px;height:82px;"></a></div></div>
					</c:if>
					<c:if test="${not empty  painting.imageInfo4}">
						<div class="painter_outer"><div style="margin-top:4px;margin-left:5px;width: 66px;height: 82px;background-position: center center;background-image: url('${painting.smallImagePath4 }');background-repeat:no-repeat;"><a style="display:block;width:66px;height:82px;"></a></div></div>
					</c:if>
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
		<div id="ciyi_bottom"></div>
	</div>
	
	<div id="relativeList_div">
		<div style="font-size: 14px;padding: 5px 0px 5px 35px;">相关作品</div>
		<c:forEach items="${requestScope.relativeList}" var="result" varStatus="status">
			<%@ include file="/ciyi/ciyi_fragment.jsp" %>
		</c:forEach>
	</div>

<form id="bidForm" name="bidForm" action="${ctx}/customer/bid!bid_confirm.do" method="post">
	<input type="hidden" value="" name="bid_id_hiddden" id="bid_id_hiddden"/>
	<input type="hidden" value="" name="new_price_hiddden" id="new_price_hiddden"/>
	<input type="hidden" value="" name="page_title_hiddden" id="page_title_hiddden"/>
	<input type="hidden" value="" name="remain_time_hiddden" id="remain_time_hiddden"/>
</form>	

<script type="text/javascript" src="${ctx }/js/fancybox/jquery-latest.min.js"></script>
<script type="text/javascript" src="${ctx }/js/fancybox/jquery.fancybox.pack.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="${ctx }/js/fancybox/jquery.fancybox.css?v=2.1.4" media="screen" />

<script type="text/javascript">

var paintingArray = ${requestScope.paintingArray};
var imagesArray = ${requestScope.imagesArray};

var endtimes=new Array();//结束时间

var nowtimes;
var date_str = '<fmt:formatDate value="${requestScope.bid.endTime }" pattern="MM/dd/yyyy HH:mm:ss" />';
endtimes[0] = date_str;
function givetime(){

	nowtimes=new Date();
	window.setTimeout("DownCount()",1000);
}

function DownCount(){

	nowtimes=Number(nowtimes)+1000;
	var len = endtimes.length;

	for(var i=0;i< len;i++)
	{
		var theDay = new Date(endtimes[i]);
		theDay = theDay++;
		if(theDay<=nowtimes)
		{
			document.getElementById("left_time"+i).innerHTML = "0天00小时00分00秒";
		}
		else{
			show_date_time(endtimes[i],i);
		}
	}
	window.setTimeout("DownCount()",1000);
}

function show_date_time(date_str,index){

	BirthDay=new Date(date_str);

	today=new Date();
	timeold=( BirthDay.getTime() - today.getTime());
	sectimeold=timeold/1000;
	secondsold=Math.floor(sectimeold);
	
	msPerDay=24*60*60*1000;
	e_daysold=timeold/msPerDay;
	daysold=Math.floor(e_daysold);
	
	e_hrsold=(e_daysold-daysold)*24;
	hrsold=Math.floor(e_hrsold);
	
	e_minsold=(e_hrsold-hrsold)*60;
	minsold=Math.floor((e_hrsold-hrsold)*60);
	
	seconds=Math.floor((e_minsold-minsold)*60);

	var target_obj = document.getElementById("left_time"+index);

	if(typeof target_obj != "undefined"){
		target_obj.innerHTML= daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒"; 
	}
}

function onbid(){

	var bid_id = $("#bid_id").val();
	var new_price = $("#new_price").val();
	var page_title = $("#page_title").html();
	var remain_time = $("#left_time0").html();

	page_title = escape(escape(page_title));
	remain_time = escape(escape(remain_time));

	document.getElementById("bid_id_hiddden").value = bid_id ;
	document.getElementById("new_price_hiddden").value = new_price;
	document.getElementById("page_title_hiddden").value = page_title ;
	document.getElementById("remain_time_hiddden").value = remain_time;

	$.ajax( {
		type : "POST",
		url : "${ctx}/customer/order!checkL.do?time="+new Date(),
		timeout : 6000,
		async : false, 
		success : function(data, textStatus) {
			if(data  == "0000"){
				var link_url = '${ctx}/customer/bid!bid_confirm.do?bid_id='+bid_id+'&new_price='+new_price+'&page_title='+page_title+'&remain_time='+remain_time+'&time='+new Date().getTime();

				var width = 383;
				var height = 265;
				var content = '<iframe src="'+link_url+'" width="383" height="264" frameborder="0" marginheight="0" marginwidth="0">';
				createPopupDiv("_link_div_win",width,height,content);
			}
			else{
				var link_url = "${ctx}/front/bid/login_fragment.jsp";
				var width = 383;
				var height = 265;
				var content = '<iframe src="'+link_url+'" width="383" height="264" frameborder="0" marginheight="0" marginwidth="0">';
				createPopupDiv("_link_div_win",width,height,content);
			}
		}
	});
}

/**** 距滚动条顶部距离 *******/
function getScrollTop(){
	var scrollPos; 
	if (typeof window.pageYOffset != 'undefined') { 
	   scrollPos = window.pageYOffset; 
	} 
	else if (typeof document.compatMode != 'undefined' && 
	     document.compatMode != 'BackCompat') { 
	   scrollPos = document.documentElement.scrollTop; 
	} 
	else if (typeof document.body != 'undefined') { 
	   scrollPos = document.body.scrollTop; 
	}
	return  scrollPos;
}

function createPopupDiv(divId,width,height,content){

	var divWindow = document.getElementById(divId);
	divWindow.style.display = "block";
	divWindow.style.width = width +"px";
	divWindow.style.height  = height + "px" ;
	var scrollTop = getScrollTop() ;
	divWindow.style.left = (document.body.offsetWidth - width)/2 + document.body.scrollLeft + "px";
	divWindow.style.top  = (window.screen.availHeight - height) / 2 + scrollTop + "px";
	divWindow.innerHTML = content;
}

function closePopupDiv(divId){

	var divWindow = document.getElementById(divId);
	divWindow.style.display = "none";
}

var newest_price = 0.0;//当前最新价格
function live_price(){

	var bid_id = $("#bid_id").val();
	$.ajax( {
		type : "POST",
		url : "${ctx }/customer/bid!queryCurrentBid.do?bid_id="+ bid_id,
		timeout : 6000,
		async : true, //ajax同步
		success : function(data, textStatus) {
			if(data != ""){
				var response_data = eval("("+data+")");
				var price = response_data.bidPrice;
				var userName = response_data.username;
				newest_price = price;
				$("#current_price").html(price);
				$("#current_customer").html(userName);
			}else{
				newest_price = $("#new_price").val();
			}
		}
	});
}

/************ 预修改价格(本地修改,不提交服务器 )  *************/
function refresh_price(flag){
		
	if(newest_price ==  0.0){
		live_price();
	}
	
	var _price = 100;
	var old_price = $("#new_price").val();
	var new_price = Number(old_price);
	if( flag == 'down'){
		new_price = new_price - _price;
		if( new_price < newest_price ){
			new_price = newest_price;
			return;
		}
	}
	else if(flag == 'up'){
		new_price = new_price + _price;
	}else{
		new_price = 0.00;
	}
	
	new_price = Math.round(new_price * 100)/100;
	$("#new_price").val(new_price);
}

function qiehuanPic(){
	var imgpath = imagesArray[index_images].middleImageBpath;
	$(".ciyi_pic").css("background-image","url('"+imgpath+"')");
	$(".ciyi_pic").css("background-repeat","no-repeat");
}

var index_images = 0;//图片序列

$(function(){
	
	$(".painter_outer").click(function(){
	   index_images = $(".painter_outer").index($(this));
	   $("#view_quantu_link").attr("href",imagesArray[index_images].originalImagePath);
	   qiehuanPic();
    });
	
	//查看原图
	$("#view_quantu_link").fancybox({maxWidth:"900px",fitToView:false});
	
	$(".preImg").click(function(){
		if(paintingArray.length == 2 && paintingArray[0] > 0 ){
			var id  = paintingArray[0];
			var link_url = "${ctx}/ciyi/ciyi!detail.do?id="+id;
			location.href = link_url;
		}
	});

	$(".nextImg").click(function(){
		if(paintingArray.length == 2 && paintingArray[1] > 0 ){
			var id  = paintingArray[1];
			var link_url = "${ctx}/ciyi/ciyi!detail.do?id="+id;
			location.href = link_url;
		}
	});

});

givetime();
</script>

<%@include file="/commons/foot.jsp" %>

</body>

</html>